<template>
	<view>
		<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="entry">
			<view v-if="error">{{error.message}}</view>
			<view v-if="loading" class="loading-simple">加载中...</view>
			<view v-else-if="data.length === 0" class="no-data">
				没有数据~~
			</view>
			<view v-else>
				<uni-list>
					<uni-list-item clickable @click="detail(item._id)" link v-for="item in data" :key="item._id"
						:title="item.name" :note="item.describe"></uni-list-item>
				</uni-list>
			</view>
		</unicloud-db>
		<view class="btn-area">
			<uni-icons class="add-btn" type="plusempty" size="50" @click="add"></uni-icons>
		</view>
		<uni-icons class="home-btn" type="home" size="28" @click="home"></uni-icons>
	</view>
</template>

<script>
	import {
		getDateMs
	} from '../../../../common/date';
	import {
		MemoryApi
	} from '../../../../backend/memory/MemoryApi';
	import {
		PagesPath
	} from '../../../../common/pagesPath';

	export default {
		data() {
			return {
				date: getDateMs()
			}
		},
		onLoad() {
			console.log('load .................');
		},
		onShow() {
			this.loadData();
			MemoryApi.getListByDate(this.date).then(res => {
				console.log('查询结果====', res);
			}).catch(e => {
				console.log('查询结果报错====', e);
			})

		},
		methods: {
			loadData() {
				this.$refs.udb?.loadData({
					clear: true
				});
			},
			detail(id) {
				const path = PagesPath.getPath('entry', 'detail', id);
				uni.navigateTo({
					url: path
				})
			},
			add() {
				const path = PagesPath.getPath('entry', 'create');
				uni.navigateTo({
					url: path
				})
			},
			home() {
				uni.navigateTo({
					url: PagesPath.getPath('index', 'list')
				})
			}

		}
	}
</script>

<style lang="scss">
	.no-data,
	.loading-simple {
		text-align: center;
		margin: 100px;
		color: #555555;
	}

	.home-btn {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 10000;
		margin-top: 8px;
		margin-right: 10px;
	}

	.btn-area {
		position: fixed;
		bottom: 20%;
		right: 10%;
		display: flex;

		.add-btn {
			background-color: rgba(0, 0, 255, 0.8);
			border-radius: 50%;
			color: white !important;
			padding: 5px;
		}
	}
</style>